<template>
	<view class="self-details">
		<nav-bar :titleCenter="false" title="编辑资料">编辑资料</nav-bar>
		<uni-list>
			<uni-list-item title="用户名">
				<template v-slot:footer>
					<view class="uni-thumb" style="margin: 0;" @click="show=true">{{userInfo.nickName}}</view>
					<!-- <input  type="text" style="margin: 0;" :placeholder=userInfo.nickName /> -->
				</template>
			</uni-list-item>
			<uni-list-item title="性别">
				<template v-slot:footer>
					<view class="uni-thumb" style="margin: 0;">
						<view class="list-item">
							<view class="item-content" @tap="handleTap('sex')">
								<text class="item-title">{{ sexSelect }}</text>
							</view>
							<lb-picker ref="sex" v-model="sexSelect" mode="selector" :list="sexList" :dataset="{name:'sex'}"
								@change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
							</lb-picker>
						</view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="生日">
				<template v-slot:footer>
					<view class="uni-thumb" style="margin: 0;">
						<view class="list-item">
							<view class="item-content" @tap="handleTap('birthday')">
								<text class="item-title">{{ birthdayTime }}</text>
							</view>
							<lb-picker ref="birthday" v-model="birthdayTime" mode="dateSelector" :ch-config="{
							      year: '年',
							      month: '月',
							      day: '日'
							    }" :dataset="{name:'birthday'}" @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
							</lb-picker>
						</view>
						<view class="grey-block"></view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="城市">
				<template v-slot:footer>
					<view class="uni-thumb" style="margin: 0;">
						<view class="list-item">
							<view class="item-content" @tap="handleTap('city')">
								<!-- <text class="item-title">绑定值:{{ JSON.stringify(cityNumber) }}</text> -->
								<view class="item-value">
									<text class="item-label">{{ cityChinese }}</text>
									<text v-if="!cityChinese" class="item-placeholder">选择城市</text>
								</view>
							</view>
							<lb-picker ref="city" v-model="cityNumber" mode="multiSelector" :list="cityList" :level="3"
								:dataset="{ name: 'cityChinese' }" @change="handleChange" @confirm="handleConfirm"
								@cancel="handleCancel">
							</lb-picker>
						</view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="签名">
				<template v-slot:footer>
					<view class="uni-thumb" style="margin: 0;">{{userInfo.nickName}}</view>
				</template>
			</uni-list-item>
			<!-- <uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item> -->

		</uni-list>
		<!-- 弹出框 -->
		<view>
				<u-popup v-model="show" mode="center" border-radius="14" width="80%" height="auto">
					<u-field
								v-model="mobile"
								label="用户名"
								placeholder="请输入用户名"
								:error-message="errorMessage"
							>
							</u-field>
					<u-button @click="editUsername(mobile)">修改用户名</u-button>
				</u-popup>
			</view>
	</view>
</template>

<script>
	import navBar from "@/components/zhouWei-navBar/index";
	import areaData from '../../api/area-data-min.js'
	export default {
		components: {
			navBar
		},
		data() {

			return {
				sexSelect: '男',
				birthdayTime: '2001-09-09',
				sexList: ['男', '女'],
				cityNumber: [],
				cityChinese: '北京市-北京城区-东城区',
				cityList: areaData,
				userInfo: {
					headPicUrl: '/static/images/user/avatar.jpg',
					nickName: '小傻子'
				},
				UserID:'',
				show: false,
				zoom:true,
				mobile: '',
				errorMessage: '剑未配妥，出门已是江湖',
			}
		},
		onLoad: function (option) {
		        console.log(option.id);
		    },
		mounted() {
			try {
				const value = uni.getStorageSync('setUserData');
				this.UserID = value.user_id
			
			} catch (e) {
				// error
			}
			this.$api.user.getUserLatestInfo(this.UserID).then(res=>{
				console.log(res)
				let state = res.data.code
				let userDate={
					"username":res.data.data.username,
					"user_id":res.data.data.id,
					"type_id":res.data.data.type_id,
					"sex":res.data.data.sex,
					"birthday":res.data.data.birthday,
					"city":res.data.data.city,
					"city_code":res.data.data.city_code,
				}
				if (state==200){
					this.sexSelect=userDate.sex
				    this.birthdayTime=userDate.birthday
					this.cityNumber=[userDate.city_code]
					this.cityChinese=userDate.city
					this.userInfo.nickName=userDate.username
					try {
					    uni.setStorageSync('setUserData', userDate);//同步存入缓存
						uni.setStorageSync('setUserHeadpic', userHeadpic);//同步存入缓存
					} catch (e) {
					    // error
					}
					
				}
				
			})
			
		},
		methods: {
			editUsername(username){
				if(username==""){
					this.errorMessage='用户名不能为空'
				}
				else if(username.length<4||username.length>10){
					this.errorMessage='用户名长度范围为4~10'
				}
				else if(username.length>=4&&username.length<=10) {
					this.errorMessage=false
					let valueMap={
						name:"username",
						map:username	
					}
					 this.transfer(valueMap,this.UserID)
					 this.show=false
					 this.userInfo.nickName=username
					 
				}
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				let valuename='';
				let valuemap='';
				if(e.dataset.name=='cityChinese'){
					const name = e.dataset.name
					const label = e.item.map(m => m.label).join('-')
					if (name && label) {
						this[name] = label
					}
					valuename=name;
					valuemap={
						code:e.value,
						chinese:label
					}

				}else {
					const name = e.dataset.name
					valuename=name;
					valuemap=e.value
				}
				// console.log("valuename:"+valuename)
				// console.log("valuemap:"+valuemap)
				let valueMap={
					name:valuename,
					map:valuemap	
				}
				console.log(valueMap)
				this.transfer(valueMap,this.UserID)
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			transfer(value,ID){
				this.$api.user.updateUserLatestInfo(value,ID).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index/index.scss";

	page {
		background-color: #e7e9ef;
	}

	.picker-top {
		padding: 10px 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.start {
			margin-right: 5px;
		}

		.end {
			margin-left: 5px;
		}
	}
</style>
